<template>
	<view class="home">
		<!-- tabcontrol -->
		<view class="tab-control-wrapper">
			<u-tabs :current="currentTabIndex" :list="tabList" @click="tabClick" :activeStyle="tabActiveStyle"
				:lineColor="tabLineColor"></u-tabs>
		</view>

		<!-- 骨架屏 -->
		<view class="skeleton" v-show="skeletonEnabled">
			<u-skeleton :loading="true" avatar rows="4" :rowsWidth="['20%','40%','60%','80%']"
				titleWidth="30%"></u-skeleton>
		</view>

		<!-- content -->
		<view class="content">
			<view v-for="item in dataList">
				<home-content :dataObj="item" @emitDelEvent="handleHomeContent"></home-content>
			</view>

		</view>

		<!-- edit-btn -->
		<view class="edit-btn" @click="goEdit">
			<u-icon size="30" name="edit-pen" labelPos="bottom" color="#fff"></u-icon>
		</view>
		<uni-load-more :status="uniLoad" v-show="dataList.length"></uni-load-more>
	</view>
</template>
<script>
	import homeContent from "../../components/home-content/home-content.vue"
	import {
		throttle
	} from "@/utils/common.js"

	const db = uniCloud.database();
	const articleModule = db.collection('article')
	const userModule = db.collection('uni-id-users')

	export default {
		components: {
			homeContent
		},
		onLoad() {
			// console.log("onload index");
			this.getDataThrottle = throttle(2000, this.getData)
		},
		data() {
			return {
				PullDownRefreshStatus: false,
				getDataThrottle: 'fn',
				currentTabIndex: 0,
				noMoreData: false,
				uniLoad: "none",
				tabList: [{
						name: "最新",
						type: 'publish_date'
					},
					{
						name: "热门",
						type: 'like_count'
					},
				],
				currentTabs: {
					name: "最新",
					type: 'publish_date'
				},
				dataList: [],
				tabActiveStyle: {
					color: "#333",
					fontWeight: "bold",
					transform: 'scale(1.05)'
				},
				tabLineColor: '#03ad93',
				skeletonEnabled: true,
			}
		},

		onPullDownRefresh() {
			this.PullDownRefreshStatus = true
			this.getDataThrottle(this.currentTabs.type)
			// this.getData(this.currentTabs.type)
		},
		onReachBottom() {
			console.log('onReachBottom', this.currentTabs);
			if (!this.noMoreData) {
				this.uniLoad = "loading"
				this.getDataThrottle({
					orderBy: this.currentTabs.type
				}, "append")
				// this.getData(this.currentTabs.type, "append")
			}
		},
		onShow() {
			// this.skeletonEnabled = true
			console.log(this.currentTabs);
			this.dataList = []
			this.noMoreData = false
			this.getData({
				orderBy: this.currentTabs.type
			})
		},
		methods: {
			handleHomeContent() {
				this.dataList = []
				this.skeletonEnabled = true
				console.log(this.currentTabs);
				this.getData({
					orderBy: this.currentTabs.type
				})
			},
			tabClick(data) {
				// this.skeletonEnabled = true
				this.noMoreData = false
				this.dataList = []
				// this.uniLoad = 'more'
				this.currentTabs = data

				console.log(this.currentTabs);

				this.getData({
					orderBy: data.type
				})
			},
			goEdit() {
				uni.navigateTo({
					url: "/pages/edit/edit"
				})
			},
			async getData(params, loadMode = 'normal') {
				if (!this.PullDownRefreshStatus) this.skeletonEnabled = true
				let skipLenght = 0
				if (loadMode == 'append') {
					skipLenght = this.dataList.length
				}
				console.log({
					skipLenght
				});
				// const bool = true
				try {
					let articleTempModule = articleModule
						// .where(`delState!=${bool}`)
						.where("delState!=true")
						.field(
							"title,user_id,desc,thumb,comment_count,like_count,view_count,publish_date")
						.getTemp();

					let userTempModule = userModule.field("_id,username,nickname,avatar_file").getTemp();

					const resultData = await db.collection(articleTempModule, userTempModule).orderBy((params
							?.orderBy || 'publish_date'), "desc").skip(skipLenght).limit(5)
						.get()
					console.log({
						resultData
					});
					this.skeletonEnabled = false
					if (resultData.result.data.length == 0) {
						this.noMoreData = true
						this.uniLoad = 'none'
						return
					}
					uni.stopPullDownRefresh();
					if (loadMode == 'normal') {
						this.dataList = resultData.result.data
					} else if (loadMode == 'append') {
						this.dataList.push(...resultData.result.data)
					}


				} catch (e) {
					// this.skeletonEnabled = false
					uni.showToast({
						title: e.message.slice(0, 30),
						icon: "error"
					})
					console.log('index 错误', e);
				}

			},

		}
	}
</script>

<style lang="scss" scoped>
	.home {
		padding: $pd;
	}

	// tab-control样式
	.tab-control-wrapper {
		width: fit-content;
		margin: 0 auto;
	}

	// 骨架图
	.skeleton {
		// padding: $pd;
	}

	// content 样式
	.content {}

	// edit-btn
	.edit-btn {
		position: fixed;
		bottom: 20%;
		right: 10%;
		padding: 10px;
		border-radius: 50%;
		background-color: $theme-primary;
	}
</style>